【HTML5+CSS】美观的button设置

您所在的位置:网站首页 按钮 css 【HTML5+CSS】美观的button设置

【HTML5+CSS】美观的button设置

2023-08-05 06:40| 来源: 网络整理| 查看: 265

一、 首先我们要创建一个button按钮,如我们所知,没有经过设置的按钮比较不美观。如图所示

在这里插入图片描述**二、**例子1 如果我们想要将它变得好看一些,就需要对它进行设置。 以华为官网注册的按钮为例: 在这里插入图片描述首先它是红色,当点击会有悬停变色。而且我们需要进行设置宽高,字体颜色,背景颜色。

button{ background-color:#f66f6a; color:white; width: 400px; height: 45px; border:0; font-size: 16px; box-sizing: content-box; border-radius: 5px; } button:hover{ background-color: #a54b4a; }

在这里插入图片描述该图片是在悬停状态下,得到的效果。是一致的。 三、例子2 例子2就用百度注册页面的button设置,百度注册页面如下图所示: 在这里插入图片描述如图所见,边角有弧度,而且有背景颜色,字体颜色。

button{ background-color:dodgerblue; color:white; width: 300px; height: 47px; border:0; font-size: 16px; border-radius: 30px; }

效果图: 在这里插入图片描述四、 其实关于这个按钮的设置,我觉得还是比较简单的,背景颜色,边框高度,宽度设置。其次比较重要的是边框弧度border-radius,这个属性的设置,只要掌握它就都不是问题。 关于border-radius: 语法:border-radius: 1-4 length|% / 1-4 length|%; 他可以指定四个角的值。 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

制作人:只识闲人不识君 日期:2020.04.18



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3